<template>
  <div>
    <h1>ref函数使用</h1>
    <hr />
    <ul>
      <li>{{ count }}</li>
      <li>
        <button @click="add">随机</button>
      </li>
      <li>{{ person }}</li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <ul>
    <li>
      <button @click="arr">加一</button>
    </li>
    <li v-for="item in list" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    // 1. 从vue框架中导出ref函数
    // 2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
    // 3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
    // 4. 注意⚠️：在setup函数中使用ref结果，需要通过.value  访问，模板中使用不需要加.value；而且可以重新=号赋值
    const count = ref(1)
    const add = () => {
      // count.value++
      // count.value= Math.floor(Math.random() * 100)
      person.value.age = Math.floor(Math.random() * 100)
    }
    const person = ref({
      name: '小红',
      age: 18,
    })

    const arr = () => {
      list.value.unshift(Math.floor(Math.random() * 100 + 1))
    }
    const list = ref([1, 2, 3])

    return { count, add, person, list, arr }
  },
}
</script>

<style></style>
